{extend name="base" /}
{block name="title"}家园卫士{/block}
{block name="head"}
<style>
.weui_panel_hd{padding:0;}
.weui_cell{padding:0;}
.weui_cell_bd{padding-left:15px;}
.weui_cells{margin-top:0}
.weui_cells_tips{margin:0; padding:.3em 15px; background-color:#f8f8f8}
.weui_media_appmsg { padding: 4px 10px;}
.weui_media_appmsg .weui_media_desc { -webkit-line-clamp: 1;}
.weui_panel_bd .weui_media_appmsg .weui_media_hd { width: 48px; height: 48px; line-height: 48px;}
</style>
{/block}
{block name="body"}
<div class="weui_panel ms-controller" ms-controller="Family">

  <div class="weui_panel_hd">
    <div class="weui_cells weui_cells_form">
      <div ms-class="['weui_cell',@warn2&&'weui_cell_warn']">
        <div class="weui_cell_bd weui_cell_primary"><input class="weui_input" type="number" placeholder="GameID" ms-duplex="@search2" ms-on-input="@onInput($event, 2)" /></div>
        <div class="weui_cell_ft"><i class="weui_icon_warn"></i><a class="weui-vcode-btn" ms-on-tap="@tapBind2">查询</a></div>
      </div>
    </div>
    <div class="weui_cells_tips">查询是否已被邀请码绑定</div>
    <div class="weui_cells weui_cells_form">
      <div ms-class="['weui_cell',@warn3&&'weui_cell_warn']">
        <div class="weui_cell_bd weui_cell_primary"><input class="weui_input" type="number" placeholder="GameID" ms-duplex="@search3" ms-on-input="@onInput($event, 3)" /></div>
        <div class="weui_cell_ft"><i class="weui_icon_warn"></i><a class="weui-vcode-btn" ms-on-tap="@tapBind3">添加</a></div>
      </div>
    </div>
    <div class="weui_cells_tips">添加到家园卫士</div>
  </div>
  
  <div class="weui_panel_bd">
    <div class="bg-orange f-white" style="text-align:center" ms-if="@rows.length<=0">Oh~暂无数据!</div>
    <div class="weui_media_box weui_media_appmsg" ms-if="@rows.length>0" ms-for="(k,v) in @rows">
      <div class="weui_media_hd"><img class="weui_media_appmsg_thumb" ms-attr="{src:v.Avatar?v.Avatar:'__STATIC__/agent/dface.png', alt:v.GameID}" /></div>
      <div class="weui_media_bd">
        <h4 class="weui_media_title">{{v.NickName|escape}}</h4>
        <p class="weui_media_desc">{{v.GameID}}</p>
      </div>
      <div class="weui_media_ft">
        <a class="weui_btn weui_btn_mini weui_btn_primary" ms-on-tap="@tapDel(k)">删除</a>
        <p class="weui_media_desc">{{v.SID}}</p>
      </div>
    </div>
  </div>

  <div class="weui_panel_ft" style="padding:0">
    <div class="weui-flex pager">
      <a class="weui-flex-item" ms-on-tap="@tapFirst">首页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapPre">上一页</a>
      <a class="weui-flex-item weui-border-l">{{@total}}#{{@page}}/{{@totalPage}}</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapNext">下一页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapEnd">尾页</a>
    </div>
  </div>

</div>
{/block}
{block name="foot"}
<script>
avalon.ready(function () {
  var vm = avalon.define({
    $id: "Family",
    page: "{$page??1}" * 1, // 当前第几页
    size: "{$size??10}" * 1,  // 每页几条
    total: "{$total??0}" * 1, // 总共几条
    rows: {:json_encode($rows??[], JSON_UNESCAPED_UNICODE)},
    $computed: {
      totalPage: {
        get: function () {
          var max = Math.ceil(this.total / this.size); // 最大页数=向上取整
          max = max > 0 ? max : 1;
          return max;
        }
      }
    },
    ajaxPage: function (page) {
      $.req({
        url: "{:url('family')}",
        data: {
          page: page
        },
        context: this,
        success: function (resp, status, xhr) {
          avalon.log(resp);
          if (resp.errno == 0) {
            this.page = resp.data.page * 1;
            this.size = resp.data.size * 1;
            this.total = resp.data.total * 1;
            this.rows.removeAll();
            this.rows.pushArray(resp.data.rows);
          }
        }
      });
    },
    tapFirst: function () {
      avalon.log("tapFirst");
      this.ajaxPage(1);
      return false;
    },
    tapPre: function () {
      avalon.log("tapPre");
      var page = this.page - 1;
      page = page > 0 ? page : 1;
      this.ajaxPage(page);
      return false;
    },
    tapNext: function () {
      avalon.log("tapNext");
      var page = this.page + 1;
      page = page > this.totalPage ? this.totalPage : page;
      this.ajaxPage(page);
      return false;
    },
    tapEnd: function () {
      avalon.log("tapEnd");
      this.ajaxPage(this.totalPage);
      return false;
    },
    search2: '',
    search3: '',
    warn2: false,
    warn3: false,
    onInput: function (e, i) {
      avalon.log("onInput", i);
      var val = e.target.value;
      var eax = /^\d+$/.test(val);
      if (i == 2) {
        this.warn2 = !eax;
      } else if (i == 3) {
        this.warn3 = !eax;
      } else {
        //
      }
    },
    tapBind2: function () { // 查询是否已被邀请码绑定
      var val = this.search2;
      var eax = /^\d+$/.test(val);
      if (!eax) {
        this.warn2 = true;
      } else {
        $.req({
          url: "{:url('qab')}",
          data: {
            GameID: val
          },
          success: function (resp, status, xhr) {
            avalon.log(resp);
            $.alert(resp.error);
          }
        });
      }
      return false;
    },
    tapBind3: function () { // 添加到家园卫生
      var val = this.search3;
      var eax = /^\d+$/.test(val);
      if (!eax) {
        this.warn3 = true;
      } else {
        $.req({
          url: "{:url('bfm')}",
          data: {
            GameID: val
          },
          success: function (resp, status, xhr) {
            avalon.log(resp);
            $.alert(resp.error, function () {
              if (resp.errno == 0) {
                vm.ajaxPage(vm.page);
              }
            });
          }
        });
      }
      return false;
    },
    tapDel: function (idx) {
      var elm = this.rows[idx];
      $.confirm('是否要把`' + elm.NickName + '`移除家园卫士?', function () {
        $.req({
          url: "{:url('FamilyMemberDelete')}",
          data: {
            id: elm['ID']
          },
          success: function (resp, status, xhr) {
            avalon.log(resp);
            $.alert(resp.error, function () {
              if (resp.errno == 0) {
                vm.ajaxPage(vm.page);
              }
            });
          }
        });
      });
      return false;
    }
  });
  avalon.scan(document.body);

});
</script>
{/block}